import {useEffect, useRef, useState} from "react";

function VideoPlayer({src, isPlaying}) {
    const ref = useRef(null)

    useEffect(() => {
        if (isPlaying) {
            console.log('调用 video.play()')
            ref.current.play()
        } else {
            console.log('调用 video.pause()')
            ref.current.pause()
        }
    }, [isPlaying])

    return (
        <video ref={ref} src={src} height={300} width={300} loop playsInline/>
    )
}

export default function App() {
    const [isPlaying, setIsPlaying] = useState(false)
    return (
        <>
            <button onClick={() => setIsPlaying(!isPlaying)}>
                {isPlaying ? '暂停' : '播放'}
            </button>
            <VideoPlayer
                isPlaying={isPlaying}
                src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
            />
        </>
    )
}